<template>
  <div class="lastProfits sellDetails">
    <div class="details">
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
        class="table">
        <!-- 交易时间 -->
        <el-table-column :label="$t('order.time')">
          <template slot-scope="props">
            {{props.row.tradeTime | dateFormatMonthHour}}
          </template>
        </el-table-column>
        <!-- 成交金额 -->
        <!-- <el-table-column :label="$t('order.subAvgMoney')">
          <template slot-scope="props">
            {{handleToFixed(props.row.amount, 4)}} <span class="fontx wordWrap" style="color: #999">EOS</span>
          </template>
        </el-table-column> -->
        <!-- 成交量 -->
        <el-table-column :label="$t('order.subAvgCount')" width="200">
          <template slot-scope="props">
            <span v-if="props.row.rexCount || props.row.rexCount === 0">
              {{handleToFixed(props.row.rexCount, 4)}} <span class="fontx wordWrap" style="color: #999">REX</span>
            </span>
          </template>
        </el-table-column>
        <!-- 解锁时间 -->
        <el-table-column :label="$t('rex.unlockedTime')">
          <template slot-scope="props">
            {{props.row.unlockTime | dateFormatMonthHour}}
          </template>
        </el-table-column>
        <!-- trxID -->
        <el-table-column :label="'TrxID'" width="" style="text-align: right">
          <template slot-scope="props">
            <a class="trxidbox" :href="`https://bloks.io/tx/${props.row.trxId}`" target="_blank">{{props.row.trxId}}</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fr" v-if="formData.totalCount > formData.pageSize">
      <el-pagination
        :current-page="formData.currPage"
        :page-size="formData.pageSize"
        :total="formData.totalCount"
        :pager-count="7"
        @prev-click="handlePrevPage"
        @next-click="handleNextPage"
        layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { toFixed } from '@/utils/validate';

export default {
  name: 'sellDetails', // 待解锁列表
  data() {
    return {
      loading: false,
      formData: {
        currPage: 1,
        pageSize: 100,
        totalCount: 0,
      },
      tableData: []
    }
  },
  components: {},
  props: {
    sellDetailsVisible: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    sellDetailsVisible: function change(val) {
      if (val) {
        this.handleGetUserOrder();
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.handleGetUserOrder();
  },
  beforeDestroy() {},
  methods: {
    // 获取当前委托订单列表
    handleGetUserOrder() {
      const param = {
        page: this.formData.currPage,
        limit: this.formData.pageSize,
      };
      this.loading = true;
      this.$http.post('/pool/getUnunlockedRexList', param).then((res) => {
        this.loading = false;
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        // this.formData.totalCount = res.page.totalCount;
        this.tableData = res.ununlockedRexList;
      });
    },
    // 数字截取 - 保留小数
    handleToFixed(num, p) {
      return toFixed(num, p);
    },
    // 下一页
    handleNextPage() {
      this.formData.currPage += 1;
      this.handleGetUserOrder();
    },
    // 上一页
    handlePrevPage() {
      this.formData.currPage -= 1;
      this.handleGetUserOrder();
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/newpos/public.scss';
.lastProfits{
  min-height: 420px;
}
/deep/ .table {
  .el-table__body-wrapper {
    overflow-y: auto;
    max-height: 470px;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background-color: #f1f1f1;
    }
    /*定义滚动条的轨道，内阴影及圆角*/
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 0 #f1f1f1;
      border-radius: 0;
      background-color: #f1f1f1;
    }
    /*定义滑块，内阴影及圆角*/
    &::-webkit-scrollbar-thumb {
      /*width: 10px;*/
      /*height: 25px;*/
      border-radius: 1px;
      -webkit-box-shadow: inset 0 0 0 #c1c1c1;
      background-color: rgba(193, 193, 193, 0.7);
    }
  }
}

.theme-1B1D27 {
  .table {
    /deep/ .el-table__body-wrapper {
      &::-webkit-scrollbar {
        background-color: rgba(0, 0, 0, 0) !important;
      }
      /*定义滚动条的轨道，内阴影及圆角*/
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
        background-color: rgba(0, 0, 0, 0) !important;
      }
      /*定义滑块，内阴影及圆角*/
      &::-webkit-scrollbar-thumb {
        /*width: 10px;*/
        /*height: 25px;*/
        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .5) !important;
        background-color: rgba(0, 0, 0, .5) !important;
      }
    }
  }
}
</style>

